<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/bootstrap-icons.css">
  <link rel="stylesheet" href="./css/bootstrap.css">
  <link rel="stylesheet" href="./junjin_3.1.css">
  <script src="./js/bootstrap.bundle.js"></script>
  <title>掘金项目</title>
</head>

<body>
	<!-- 导航栏 -->
	<nav class="navbar navbar-light bg-white navbar-expand-lg d-flex m-0 justify-content-evenly row sticky-top" style="border-bottom: 1px solid rgb(242,243,244);">
    <a class="navbar-brand col-1" href="#">
      <img src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg"
        class="d-block ps-2">
    </a>

    <!-- 第一层导航栏左侧列表栏 -->
    <div class="coantainer col-11 d-flex">
      <!-- 第一层列表栏 -->
      <div class="container-fluid start-0 w-50 ms-3 me-5">
      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav text-secondary" style="font-size: 19px;">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="../personal/juejin-homepage.html" style="color: #1e80ff;">首页</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">沸点</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="../personal/juejin_course.html">课程</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">直播</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">咨询</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">活动</a>
          </li>

          <li class="nav-item ">
            <div class="dropdown">
              <a class="btn btn-light nav-link dropdown-toggle shadow-none bg-white border-0" href="#" id="zsh-nav-btn" role="button"
                data-bs-toggle="dropdown" style="font-size: 19px;">
                开发社区
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a class="dropdown-item text-black" href="#">
                    <img
                      src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/qxy_logo.a3e171abe1e5724212eb4c6f3538f6c6.png~tplv-k3u1fbpfcp-5.image"
                      class="d-block w-100">
                  </a>
                </li>
              </ul>
            </div>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="#">APP</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">插件</a>
          </li>
        </ul>
      </div>
      </div>

       <!-- 第一层导航搜索框IU -->
    <form class="d-flex ms-5" role="search">
      <input class="form-control rounded-0 border-end-0 shadow-none bg-secondary bg-opacity-10 border-0 rounded-start" type="search" placeholder="探索稀土掘金"
        aria-label="Search">
      <button
        class="btn btn-outline-success bi-search text-secondary rounded-0 border-start-0 bg-secondary bg-opacity-10 border-0 shadow-none rounded-end"
        type="submit"></button>
    </form>

    <!-- 第一层导航 创作者中心 -->
    <div class="btn-group ms-3 ">
      <button class="btn btn-primary shadow-none" type="button">
        创作者中心
      </button>
      <button type="button" class="btn btn-primary shadow-none dropdown-toggle dropdown-toggle-split"
        data-bs-toggle="dropdown" aria-expanded="false">
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">写文章</a></li>
        <li><a class="dropdown-item" href="#">发沸点</a></li>
      </ul>
    </div>

    <!-- 导航栏 消息列表 -->
    <!-- <div class="nav-item notification mx-4 my-auto" data-v-28f9ac60="">
      <a class="app-link notification-a bi-chat-dots" data-v-28f9ac60="" href="#" style="font-size: 26px;"></a>
    </div> -->

    <!-- 导航栏 个人中心 -->
    <div class="d-flex">
      <button type="button" class=" ms-3 btn btn-outline-primary align-content-center shadow-none">登录</button>
    </div> 
  </nav>
	<!-- 导航栏下第二层 -->
	<div class="nav">
    <!-- nav_2为版心 -->
    <div class="nav_2">
      <div class="nav_left">
        <ul>
          <li>全部</li>
          <li>后端</li>
          <li>前端</li>
          <li>Android</li>
          <li>iOS</li>
          <li>人工智能</li>
          <li>开发工具</li>
          <li>代码人生</li>
          <li>阅读</li>
        </ul>
      </div>
    </div>
  </div>

<!-- 第三层 正文部分 -->
	<div class="nav_2">
		<!-- 版心内左侧文本部分 
		.text为版心左侧文本区域宽度 700
		-->
		<div class="text">
			<!-- 每一块 700*195  高度撑开 内间距25 -->

			<div class="d-flex" style="padding: 25px; border-bottom: 1px solid rgb(242,243,244);">
				<!-- 第一本图书 -->
				<!-- 左侧图书照片 -->
				<div>
					<img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ba4ecdc5afe94cc28c3c700a20524500~tplv-k3u1fbpfcp-no-mark:280:280:200:280.awebp?" alt=""
					class="shadow rounded" style="width: 100px;">
				</div>
				<!-- 右侧详情 -->
				<div class="" style="font-size: 14px; padding-left: 22px; "> 
					<div class="align-content-center d-flex">
						<span class="align-content-center rounded-1 my-auto" style="padding: 1px 6px; margin:3px 0px; background-color: #df8034;color: #fff; font-size: 12px;">预售</span>
						<span style="font-size: 20px;" class="ps-2 align-items-center">Elasticsearch 从入门到实践</span>
					</div>
					<div class="pt-2">
						<p class="w-100 overflow-hidden" style="height: 20px; margin-top:5px; line-height: 20px;">从零开始与你一起学习 Elasticsearch 7.x，为你揭秘 Elasticsearch 7.x 中的核心技术。</p>
					</div>
					<div class="d-flex">
						<!-- 作者头像 -->
						<div class="d-flex">
							<span style="width: 26px;height: 26px;border-radius: 13px;" class="overflow-hidden me-2">
								<img src="https://p26-passport.byteacctimg.com/img/user-avatar/7f1fb6bb48d5bc03c350a55636a4ea22~300x300.image" class="w-100" >
							</span>
							<p class="align-self-center m-0">spoofer</p>
						</div>
						<!-- 作者介绍 -->
						<div class="d-flex">
							<span class="mx-2 align-self-center">后台研发工程师 @ 某K12教育科技公司</span>
						</div>
					</div>
				</div>
			</div>











			<div class="" style="padding: 25px; border-bottom: 1px solid rgb(242,243,244);">第二本图书</div>
			<div class="" style="padding: 25px; border-bottom: 1px solid rgb(242,243,244);">第三本图书</div>
		</div>

		<!-- 版心内右侧部分 
		.right 为版心右侧 宽度240
		-->
		<div class="right">
			<div class="bg-white mb-2 m-0" style="padding:21px 24px; height:auto;" ><span><img src="../personal/img files/booklet.png" style="width: 12.5%;"></span><span class="" style="margin-left: 10px;font-size: 18px;line-height: 30px;font-weight: 500;color: #000;">我的课程</span></div>
			<div class="bg-white title" style="padding: 15px 16px; height: auto; border: 1px solid rgb(242,243,244);">
				<div style="font-size: 15px;">掘金课程是什么？</div>
				<div style="font-size: 14px;" class="py-2">一个小篇幅、高浓度、成体系、有收益的技术学习平台</div>
			</div>
			<div class="bg-white" style="padding: 12px 16px; height: auto;">
				<div>关注公众号 领取优惠码</div>
				<span><img src="../personal/img files/gongzhonghao.png" class="w-100 my-2"></span>
			</div>
			<div class="bg-white mt-2" style="padding: 15px 16px; height: auto;">
				<ul class="d-flex justify-content-evenly m-0 px-3">
					<li class="text-center my-1 px-2">
						<span><img src="../personal/img files/pen.png" class="w-50 d-block m-auto"></span>
						<span class="mt-2 d-block" style="font-size: 14px;">成为作者</span>
					</li>
					<li class="text-center my-1 px-2" style="border-left: 1px solid rgb(242,243,244);">
						<span><img src="../personal/img files/email.png" class="w-50 d-block m-auto"></span>
						<span class="mt-2 d-block" style="font-size: 14px;">建议反馈</span>
					</li>
				</ul>
			</div>
			
			
		</div>
	</div>

</body>

</html>
